extends layout

block head
  link(rel='stylesheet' href='/stylesheets/video-js.css')
  link(rel='stylesheet' href='/stylesheets/bootstrap.css')
  script(type='text/javascript' src='/javascripts/index.js')

block content
  .container
    .row
      .col-md-8.col-md-offset-2
        .panel.panel-info
          h1(style='text-align: center') welcome 2 iJuli, u can
        .col-md-6
          .panel.panel-info(style='padding: 4px;')
            h4(style='text-align: center') choose a demo to create a new room
            select.form-control#selected
              for demo in demos
                option #{demo}
            a.btn.btn-warning.btn-group-justified(href='javascript:;' onclick='getNewRoom()') create
            h4
        .col-md-6
          .panel.panel-info(style='padding: 4px;')
            h4(style='text-align: center') or join an existing room
            for room in rooms
              - const url = '/room/' + room.id
              a.btn.btn-success.btn-group-justified(href=url style='margin-bottom: 4px;') id:  #{room.id} || nowPlaying:  #{room.fileName}
            h4

